// 创建Vue对象 vm
let vm = new Vue({
    el: '#app',
    delimiters: ['[[', ']]'],
    data: {
        username: '',
        password: '',
        password2: '',
        mobile: '',
        Email: '',
        allow: '',
        image_code: '',
        Email_code: '',

        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_Email: false,
        error_allow: false,
        error_image_code: false,
        error_Email_code: false,

        error_name_message: '',
        error_mobile_message: '',
        error_Email_message: '',
        error_image_code_message: '',
        error_Email_code_message: '',

        uuid: '',
        image_code_url: '',

        get_msg_code: '获取邮箱验证码',
        sending_flag: false
    },
    mounted() { // 生命周期 页面加载
        this.generate_image_code()
    },
    methods: {
        // 生成图形验证码 封装函数
        generate_image_code() {
            this.uuid = generateUUID() // 自动生成uuid
            this.image_code_url = `/image_codes/${this.uuid}/`
        },

        // 校验用户名
        check_username() {
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            if (re.test(this.username)) {
                this.error_name = false;
            } else {
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            }
            // 判断用户名是否重复
            if (this.error_name == false) {
                let url = `/usernames/${this.username}/count/`
                axios.get(url, {
                    responseType: 'json'
                }).then((res) => {
                    if (res.data.count == 1) {
                        // 用户存在
                        this.error_name_message = '用户名已存在'
                        this.error_name = true
                    } else {
                        this.error_name = false
                    }
                }).catch((err) => {
                    console.log(err.response)
                })
            }
        },
        // 校验密码
        check_password() {
            let re = /^[0-9A-Za-z]{8,20}$/;
            if (re.test(this.password)) {
                this.error_password = false;
            } else {
                this.error_password = true;
            }
        },
        // 校验确认密码
        check_password2() {
            if (this.password != this.password2) {
                this.error_password2 = true;
            } else {
                this.error_password2 = false;
            }
        },
        // 校验手机号
        check_mobile() {
            let re = /^1[3-9]\d{9}$/;
            if (re.test(this.mobile)) {
                this.error_mobile = false;
            } else {
                this.error_mobile_message = '您输入的手机号格式不正确';
                this.error_mobile = true;
            }

            // 判断手机号
            if (this.error_mobile == false) {
                let url = `/mobiles/${this.mobile}/count/`
                axios(url, {
                    responseType: 'json'
                }).then((res) => {
                    if (res.data.count >= 1) {
                        // 重复
                        this.error_mobile_message = '手机号已存在'
                        this.error_mobile = true
                    } else {
                        this.error_mobile = false
                    }
                }).catch((err) => {
                    console.log(err.response)
                })
            }

        },
        // 校验邮箱
        check_Email() {
            let re = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (re.test(this.Email)) {
                this.error_Email = false;
            } else {
                this.error_Email_message = '您输入的邮箱格式不正确';
                this.error_Email = true;
            }

        },
        // 校验图形验证码
        check_image_code() {
            if (this.image_code.length != 4) {
                this.error_image_code_message = '请输入图形验证码'
                this.error_image_code = true
            } else {
                this.error_image_code = false
            }
        },
        // 校验邮箱验证码
        check_Email_code() {
            if (this.Email_code.length != 6) {
                this.error_Email_code_message = '请输入邮箱验证码'
                this.error_Email_code = true
            } else {
                this.error_Email_code = false
            }
        },
        send_Email_code(){
            this.check_Email()
            this.check_image_code()
            if (this.error_Email || this.error_image_code) return
            if (this.sending_flag == true){
                return
            }
            this.sending_flag = true

            // 检验参数
            this.check_Email()
            // this.check_image_code()

            axios({
                url: '/Email_codes/',
                methods: 'get',
                params:{
                    Email: this.Email,
                    uuid: this.uuid,
                    image_code: this.image_code
                },
            }).then(res => {
                let data = res.data
                // 请求成功
                if (data.code == '0'){
                    let num = 60 // 倒计时
                    this.get_msg_code = '已发送'
                    let t = setInterval(() => {
                        if (num<=0){
                            clearInterval(t)
                            this.get_msg_code = '获取邮箱验证码'
                            this.sending_flag = false
                        }else{
                            num--
                            this.get_msg_code = num + '秒'
                        }
                    },1000)
                } // 验证码有误 失效
                else{
                    if (data.code == '4001'){
                        this.error_image_code_message = data.errmsg
                        this.error_image_code = true
                    }// 访问过于频繁
                    else if (data.code == '4002'){
                        this.error_Email_code_message = data.errmsg
                        this.error_Email_code = true

                        let num = data.second  // 倒计时
                        this.get_msg_code = num + '秒'
                        let t = setInterval(() => {
                            if (num<=0){
                                clearInterval(t)
                                this.get_msg_code = '获取邮箱验证码'
                                this.sending_flag = false
                                this.error_Email_code = false
                            }else{
                                num--
                                this.get_msg_code = num + '秒'
                            }
                        },1000)
                    }
                    // 刷新验证码
                    this.generate_image_code()
                    this.sending_flag = false
                }

            }).catch(err => {
                this.sending_flag = false
            })

        },
        // 校验是否勾选协议
        check_allow() {
            if (!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        // 提交表单
        on_submit() {
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_Email();
            this.check_image_code();
            this.check_Email_code();
            this.check_allow();

            if (this.error_name == true || this.error_password == true || this.error_password2 == true
                || this.error_mobile == true || this.error_image_code == true || this.error_Email_code == true|| this.error_allow == true) {
                // 禁用表单的提交
                window.event.returnValue = false;
            }
        }
    }

});